<template>
   <div>
        <div style="color: aliceblue;margin-top: 10px;font-weight: 700;font-size: 17px;">【生产计划情况】</div>
        <div ref="myDiv" id="chartDiv" class="radar-echart" />
    </div>
</template>

<script>
import * as echarts from 'echarts/core';
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components';
import { PieChart } from 'echarts/charts';
import { LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout
]);
export default {
    name: 'piechart',
    props:{
      piechart:{
                 type:Array,
                 isGetData:false
             }
         },
  // 页面渲染完毕事件
  mounted() {
    const myChart = echarts.init(this.$refs.myDiv) // 得到图表实例
    myChart.setOption({
        title: {
         x: 'center'
      },
      tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
      bottom: "5%",
      itemWidth: 10,
      itemHeight: 10,
      textStyle: {
        color: "rgba(255,255,255,.5)",
        fontSize: "12"
      }
    }, 
     series: [
          {
            name: "【生产计划情况】",
            type: 'pie',
            radius: '60%',  //图的大小
            center: ['50%', '40%'], //图的位置，距离左跟上的位置
            label: {
                    formatter: '{b}:{c}' + '\n\r' + '({d}%)',
                    show: true,
                    color:"#fff"
            },
            data: 
           this.piechart.map(item => ({
              name:item.name,
              value:item.total
            })),
            // [
            //   {
            //     name:"截齿计划",
            //     value:'10'
            //   },
            //   {
            //     name:"牙轮计划",
            //     value:'8'
            //   },
            //   {
            //     name:"斗齿计划",
            //     value:'9'
            //   },
            //   {
            //     name:"右刀计划",
            //     value:'5'
            //   },
            //   {
            //     name:"左刀计划",
            //     value:'6'
            //   },
            //   {
            //     name:"刀齿计划",
            //     value:'4'
            //   },
            //   {
            //     name:"齿座计划",
            //     value:'4'
            //   }
            // ],
            labelLine: {
                    formatter: '{b}:{c}' + '\n\r' + '({d}%)',
                    show: true,
                    position: 'left'
                },
          }
        ]
    })
  },
}
</script>

<style scoped>
.radar-echart {
    width: 100%;
    height: 365px;
}
</style>